<template>
  <div class="bigBox">
    <!-- 登录页面 -->
    <div class="big-container" v-if="isShow">
      <h2 class="title">面试人员登录</h2>
      <input
          type="text"
          class="my-phone"
          placeholder="手机号"
          v-model="phone"
      />
      <input
          type="password"
          class="my-phone"
          placeholder="密码"
          v-model="passwrod"
      />
      <button @click="UserLogin" class="loginIn">登陆</button>
      <button class="dengji" @click="register">登记账户</button>
    </div>

    <!-- 注册账户页面 -->
    <div class="big-container2" v-else>
      <h2 class="title">面试人员信息登记</h2>
      <input
          type="text"
          class="my-phone"
          placeholder="真实姓名:"
          v-model="tName"
      />
      <select class="my-phone my-select" v-model="tSex">
        <option value="">请选择性别</option>
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
      <select class="my-phone my-select" v-model="tStudy">
        <option value="">请选择学历</option>
        <option value="初中以下">初中以下</option>
        <option value="初中">初中</option>
        <option value="高中/中专">高中/中专</option>
        <option value="大专">大专</option>
        <option value="本科">本科</option>
        <option value="硕士">硕士</option>
        <option value="博士">博士</option>
      </select>
      <input
          type="text"
          class="my-phone"
          placeholder="身高CM"
          v-model="tHeight"
      />
      <input
          type="text"
          class="my-phone"
          placeholder="手机号码"
          v-model="tPhone"
      />
      <input
          type="password"
          class="my-phone"
          placeholder="登录密码"
          v-model="tPasswrod"
      />
      <input
          type="password"
          class="my-phone"
          placeholder="确认密码"
          v-model="checkPassword2"
      />
      <button class="loginIn" @click="registerInfo">信息登记</button>
      <div class="already" @click="switchLogin">已有账户，点击登录</div>
    </div>
  </div>
</template>

<script>
import {mapActions, mapState} from "vuex";

export default {
  name: "TalentLogin",
  data() {
    return {
      // 控制登陆注册切换
      isShow: true,
      //登录页面
      phone: "",
      passwrod: "",
      //信息登记页面
      tName: "",
      tSex: "",
      tStudy: "",
      tHeight: "",
      tPhone: "",
      tPasswrod: "",
      checkPassword2: "",
    };
  },
  methods: {
    //登录
    async UserLogin() {
      // console.log(this.phone, this.password);
      const p = this.phone;
      const pw = this.passwrod;
      await this.$axios.post(`/talents/talentsLogin/${p}/${pw}`).then((res) => {
        if (res.data.msg === "登录成功") {
          localStorage.setItem("userInfo", JSON.stringify(res.data.data));
          this.$notify({
            title: "成功",
            message: "登录成功！！",
            type: "success",
            duration: 800,
            showClose: false,
          })
          setTimeout(() => {
            if (res.data.data.tSalary === '' || null || undefined) {
              this.$router.push({
                name: 'init'
              })
            }
            this.$router.push({
              name: 'infoResume'
            })
          }, 500);
        }
      });
    },

    //点击切换登记账户
    register() {
      //不用操作dom来控制显示隐藏
      this.isShow = !this.isShow;
    },
    // 切换登录
    switchLogin() {
      this.isShow = !this.isShow;
    },

    //点击得到登记账户信息
    async registerInfo() {
      let pReg = /^1[3-9]\d{9}$/
      if (!pReg.test(this.tPhone)) return alert('手机号不存在，请检查手机号')

      if (this.tPasswrod !== this.checkPassword2) return alert("两次密码不一致，请重新输入")
      if (
          this.tName === "" ||
          this.tSex === "" ||
          this.tStudy === "" ||
          this.tHeight === "" ||
          this.tPhone === "" ||
          this.tPasswrod === "" ||
          this.checkPassword2 === ""
      ) {
        return alert("请将信息填写完整再登记");
      }

      //查看手机是否注册过
      await this.$axios.get(`/talents/isPhoneRegister/${this.tPhone}`)
          .then(res => {
            if (res.data.data === "该用户以存在") {
              this.$notify.error({
                title: "失败",
                message: "手机号已注册~~",
                duration: 1500,
                showClose: false,
              })
            }else{
              this.registerRequest()
            }
          }).catch(err => {
            console.log(err)
          })

    },
    //注册请求
    async registerRequest() {
      //注册请求17856123211
      await this.$axios({
        method: "POST",
        url: "/talents/talentsRegister",
        params: {
          tName: this.tName,
          tSex: this.tSex,
          tStudy: this.tStudy,
          tHeight: this.tHeight,
          tPhone: this.tPhone,
          tPasswrod: this.tPasswrod,
        },
      }).then((res) => {
        if (res.data.code === 100) {
          this.$notify({
            title: "成功",
            message: "注册成功！！",
            type: "success",
            duration: 1500,
            showClose: false,
          });
          setTimeout(() => {
            this.isShow = !this.isShow;
          }, 500);
        }
      }).catch((err) => {
        this.$notify.error({
          title: "失败",
          message: "注册失败~~",
          duration: 1500,
          showClose: false,
        });
      });
    }
  },
};
</script>

<style scoped>
.bigBox {
  width: 100%;
  height: 100vh;
  /* height:700px; */
  background-image: url(../../assets/talent-icon/background.jpg);
  background-size: cover;
  border: 0.1px solid rgb(250, 247, 247);
}

.big-container {
  border: 1px solid gray;
  height: 420px;
  width: 400px;
  margin: 150px auto;
  display: flex;
  flex-direction: column;
  text-align: center;
  color: rgb(66, 66, 66);
  background-color: rgba(182, 193, 201, 0.527);
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  /* display: none; */
}

/* 面试人员登录 */
.title {
  margin-top: 60px;
  margin-bottom: 20px;
}

.my-phone {
  width: 300px;
  margin: 0 auto;
  border: none;
  /* border: 1px solid gray; */
  border-radius: 5px;
  padding: 3px 5px;
  line-height: 34px;
  background-color: rgb(245, 243, 243);
  margin-top: 15px;
  outline-color: rgba(131, 197, 245, 0.527);
}

/* 登录按钮 */
.loginIn {
  width: 300px;
  margin: 0 auto;
  border: none;
  /* border: 1px solid gray; */
  padding: 3px 5px;
  line-height: 34px;
  border-radius: 5px;
  background-color: rgb(61, 170, 233);
  margin-top: 15px;
  color: white;
  font-size: 18px;
}

.loginIn:hover {
  background-color: rgb(64, 162, 219);
}

/* 登记 */
.dengji {
  width: 300px;
  margin: 0 auto;
  border: none;
  padding: 3px 5px;
  line-height: 34px;
  border-radius: 5px;
  margin-top: 15px;
  font-size: 16px;
  color: gray;
  background-color: rgb(120, 172, 201);
  color: white;
}

.dengji:hover {
  background-color: rgb(92, 132, 154);
  color: rgb(230, 226, 226);
}

/* 登记账户 */
.big-container2 {
  border: 1px solid gray;
  height: 620px;
  width: 400px;
  margin: 100px auto;
  display: flex;
  flex-direction: column;
  text-align: center;
  color: rgb(66, 66, 66);
  background-color: rgba(182, 193, 201, 0.527);
  border-radius: 5px;
  position: relative;
}

.my-select {
  height: 40px;
  color: rgb(117, 117, 117);
}

/* 已有帐户，点击登录 */
.already {
  margin-top: 10px;
}

.already:hover {
  color: rgb(226, 241, 247);
}
</style>